import Vue from "vue";

/**
 * ## 复制文本到剪贴板
 * @param {string} text - 需要复制的文本
 * @param {Object} $event - 触发复制操作的事件对象
 */
export default function clip(text, $event) {
    try {
        // 使用 Clipboard API 复制文本
        navigator.clipboard.writeText(text).then(() => {
            // 显示提示信息
            Vue.prototype.$message.success('复制成功');
        }).catch((error) => {
            throw new Error('复制操作失败: ' + error.message);
        });
    } catch (error) {
        // 显示错误信息
        Vue.prototype.$message.error(error.message);
    }
    // 阻止事件的默认行为，为了确保复制操作能够顺利执行，而不受其他默认行为或父元素事件的影响
    $event.stopPropagation();
    // 阻止事件的进一步传播
    $event.preventDefault();
}

// 对文本进行HTML实体转义
function escapeHtml(text) {
    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
}

// 定义一个 Vue 自定义指令 'v-copy'
Vue.directive('copy', {
    // 在指令绑定到元素时执行
    bind(el, binding) {
        // 设置元素的 cursor 样式为 pointer
        el.style.cursor = 'pointer';
        // 当元素被点击时，尝试复制文本
        el.addEventListener('click', () => {
            // 对要复制的文本进行 HTML 转义，防止 XSS 攻击
            const textToCopy = escapeHtml(binding.value);
            try {
                // 使用 Clipboard API 复制文本
                navigator.clipboard.writeText(textToCopy).then(() => {
                    // 显示提示信息
                    Vue.prototype.$message.success('复制成功');
                }).catch((error) => {
                    // 抛出复制失败的错误
                    throw new Error('复制操作失败: ' + error.message);
                });
            } catch (error) {
                // 显示错误信息
                Vue.prototype.$message.error(error.message);
            }
        });
    },
    // 在指令解绑时执行
    unbind(el) {
        // 移除点击事件监听器
        el.removeEventListener('click', () => {
        });
    }
});

